<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索并集</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    
    body {
        background-color: #ccc;
    }
    
    .box {
        margin: 0 auto;
        margin-top: 30px;
        width: 800px;
        height: 1000px;
        background-color: white;
        padding: 30px;
    }
    
    .search_box {
        margin: 0 auto;
    }
    
    .search_word {
        width: 300px;
        height: 56px;
        margin-left: 180px;
        margin-bottom: 30px;
    }
    
    .search_btn {
        height: 60px;
        width: 100px;
        margin-left: -5px;
    }
    
    .show_list {
        height: 600px;
        width: 600px;
        margin: 0 auto;
    }
    
    .show_list li {
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 60px;
    }
    
    .pri_btn {
        float: left;
    }
    
    .next_btn {
        float: right;
    }
</style>

<body>
    <div class="box">
        <div class="search_box">
            <input type="text" class="search_word">
            <button class="search_btn">搜索</button>
        </div>
        <ul class="show_list">

        </ul>
        <div class="button_box">
            <button class="pri_btn">上一页</button>
            <button class="next_btn">下一页</button>
        </div>
    </div>
</body>
<script>
    window.onload = function() {
        var searchword = [{
            keryword: "篮球/足球/游泳/排球/nba",
            content: "第十一届非官方非正式奥运会"
        }, {
            keryword: "篮球/nba/克里斯保罗",
            content: "保罗是顶级控卫"
        }, {
            keryword: "游泳/孙杨/nba",
            content: "孙杨夺得了三连冠"
        }, {
            keryword: "乒乓球/nba",
            content: "中国乒乓球"
        }, {
            keryword: "乒乓球/nba",
            content: "中国乒乓球"
        }, {
            keryword: "乒乓球/nba",
            content: "中国乒乓球"
        }, {
            keryword: "乒乓球/nba",
            content: "中国乒乓球"
        }, {
            keryword: "乒乓球/nba",
            content: "中国乒乓球"
        }];
        var btnsearch = document.querySelector(".search_btn");
        var btnpri = document.querySelector(".pri_btn");
        var btnnext = document.querySelector(".next_btn");
        var shows = document.querySelector(".show_list");
        btnpri.style.display = "none";
        btnnext.style.display = "none";
        var resultArry = [];
        var pageLength = 3;
        var page = 1;
        var show = function() {
            var pageL = pageLength;
            var base = (page - 1) * pageLength;
            if (resultArry.length < page * pageLength) {
                pageL = resultArry.length - base;

            }
            if (resultArry.length > page * pageLength) {
                btnnext.style.display = "block";
            }
            var showArry = "";
            for (var x = 0; x < pageL; x++) {
                showArry = showArry + "<li>第" + (x + 1 + base) + "项:" + resultArry[x + base] + "</li>";
            }

            shows.innerHTML = showArry;
        }


        btnsearch.addEventListener("click", function() {
            console.log("已点击搜索");
            var search_word = document.querySelector(".search_word");

            var searchValueArry = search_word.value;
            var searchValue = searchValueArry.split(" ");
            // 并集
            if (searchValue != "") {
                resultArry = [];
                for (var a = 0; a < searchValue.length; a++) {
                    if (searchValue[a] === "") {
                        return;
                    }
                    for (var i = 0; i < searchword.length; i++) {
                        var kerywords = searchword[i].keryword.split("/");
                        for (var j = 0; j < kerywords.length; j++) {
                            if (searchValue[a] == kerywords[j]) {
                                console.log(searchword[i]);
                                resultArry.push(searchword[i].content);

                                break;
                            }
                        }
                    }

                }
                show();
            }
            console.log(resultArry);
        });
        btnpri.addEventListener("click", function() {
            console.log("已点击上一页");
            page--;
            show();
            if (page == 1) {
                btnpri.style.display = "none";
            }

        });
        btnnext.addEventListener("click", function() {
            console.log("已点击下一页");
            page++;
            show();
            btnpri.style.display = "block";
            if (resultArry.length <= page * pageLength) {
                btnnext.style.display = "none";
            }
        });
    }
</script>

</html>